import React  from 'react';
// 函数调用
class App extends React.Component{
  state = {
    name:'小明'
  }
  age = 18

  // react 中没有vue 和angular 中的双向数据绑定, 如果数据修改需要调用 this.setState() 才能对页面进行重新渲染.
  // 修改姓名1 
  //this指向问题, 对于一般函数 非箭头函数谁调用this 就指向谁
  chageName1(){
    this.setState({
      name:'小王'
    })
  }
  // 修改姓名2
  //this 指向, 箭头函数this指向为本组件
  chageName2 = ()=>{
    this.setState({
      name:'小王'
    })
  }
  // 修改年龄
  chageAge(){
    this.age = 19
  }

  render (){
    return (
      <div>
        <div>
          <span>姓名: {this.state.name}</span>
        </div>
        <div>
          {/*html 中的注释方式,在大括号中就是js代码,所以用js注释 */}
          {
          // 单行或多行注释都可以
          }
          {/** 事件调用, {this.chageName1()}会立即执行{} 中就是返回值,如果没有返回值 就是 undefined */}
          {/**this指向问题, 对于一般函数 非箭头函数谁调用this 就指向谁,第一个调用函数,应为方法体里有this,而调用方法的是个button 按钮, 没有this.setState这个方法,所以调用后会报错 */}
          <button onClick={this.chageName1}>修改姓名1</button>
          
          {/** 这种方式会重新绑定this, 把this 强制指向本组件,所以执行不会报错 */}
          <button onClick={this.chageName1.bind(this)}>修改姓名2</button>
          {/** 这个 调用方式和[修改姓名1] 是一样的,但是函数体式箭头函数,所以不会出现this 指向的问题 */}
          <button onClick={this.chageName2}>修改姓名3</button>
          {/** 这个箭头函数调用this 执行本组件,  推荐使用这种方式调用 函数, 且这种方式可以传参数, 上述直接调用方式不能传参数 */}
          <button onClick={()=>{ this.chageName1() }}>修改姓名4</button>
          {/** 这个箭头函数调用this 执行本组件 */}
          <button onClick={()=>{ this.chageName2() }}>修改姓名5</button>
        </div>
        <div>
          <span>年龄: {this.age}</span>
        </div>
        <div>
          <button onClick={()=>{ this.chageAge() }}>修改年龄</button>

          <button onClick={()=>{
            this.age = 20
            this.setState({})
            }}>修改年龄2</button>
        </div>
      </div>
      )
  }
}

export default App;
